<template>
  <div class="theme-toggle">
    <!-- 主题切换按钮 -->
    <button
      class="theme-toggle-btn glass-morphism hover-lift"
      :class="{ 'dark': isDark }"
      :title="isDark ? '切换到明亮模式' : '切换到暗黑模式'"
      @click="toggleTheme"
    >
      <transition
        name="theme-icon"
        mode="out-in"
      >
        <SunIcon
          v-if="isDark"
          key="sun"
          class="theme-icon"
        />
        <MoonIcon
          v-else
          key="moon"
          class="theme-icon"
        />
      </transition>
    </button>
    
    <!-- 主题选择器 -->
    <div
      v-if="showThemeSelector"
      class="theme-selector glass-morphism"
    >
      <h3 class="theme-selector-title">
        选择主题
      </h3>
      <div class="theme-options">
        <button
          v-for="theme in themeOptions"
          :key="theme.value"
          class="theme-option"
          :class="{ active: currentTheme === theme.value }"
          :style="{ background: theme.gradient }"
          @click="setTheme(theme.value)"
        >
          <div
            class="theme-preview"
            :style="{ background: theme.gradient }"
          />
          <span class="theme-name">{{ theme.name }}</span>
        </button>
      </div>
    </div>
    
    <!-- 主题选择器触发按钮 -->
    <button
      class="theme-selector-trigger glass-morphism hover-lift"
      title="更多主题选择"
      @click="showThemeSelector = !showThemeSelector"
    >
      <SwatchIcon class="w-5 h-5" />
    </button>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue'
import { SunIcon, MoonIcon, SwatchIcon } from '@heroicons/vue/24/outline'

// 响应式数据
const currentTheme = ref('light')
const showThemeSelector = ref(false)

// 主题选项
const themeOptions = ref([
  {
    name: '明亮',
    value: 'light',
    gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
  },
  {
    name: '暗黑',
    value: 'dark',
    gradient: 'linear-gradient(135deg, #2d3748 0%, #4a5568 100%)'
  },
  {
    name: '经典蓝',
    value: 'classic-blue',
    gradient: 'linear-gradient(135deg, #3182ce 0%, #2c5282 100%)'
  },
  {
    name: '活力橙',
    value: 'vibrant-orange',
    gradient: 'linear-gradient(135deg, #ed8936 0%, #c05621 100%)'
  },
  {
    name: '温馨粉',
    value: 'warm-pink',
    gradient: 'linear-gradient(135deg, #ed64a6 0%, #c53030 100%)'
  },
  {
    name: '深邃紫',
    value: 'deep-purple',
    gradient: 'linear-gradient(135deg, #805ad5 0%, #553c9a 100%)'
  },
  {
    name: '自然绿',
    value: 'nature-green',
    gradient: 'linear-gradient(135deg, #48bb78 0%, #2f855a 100%)'
  }
])

// 计算属性
const isDark = computed(() => currentTheme.value === 'dark')

// 方法
const toggleTheme = () => {
  currentTheme.value = isDark.value ? 'light' : 'dark'
  applyTheme()
}

const setTheme = (theme) => {
  currentTheme.value = theme
  showThemeSelector.value = false
  applyTheme()
}

const applyTheme = () => {
  document.documentElement.setAttribute('data-theme', currentTheme.value)
  localStorage.setItem('theme-preference', currentTheme.value)
  
  // 添加主题切换动画
  document.documentElement.classList.add('theme-transitioning')
  setTimeout(() => {
    document.documentElement.classList.remove('theme-transitioning')
  }, 300)
}

const loadTheme = () => {
  const savedTheme = localStorage.getItem('theme-preference')
  const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
  
  if (savedTheme) {
    currentTheme.value = savedTheme
  } else if (systemPrefersDark) {
    currentTheme.value = 'dark'
  } else {
    currentTheme.value = 'light'
  }
  
  applyTheme()
}

// 监听系统主题变化
const watchSystemTheme = () => {
  const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
  mediaQuery.addEventListener('change', (e) => {
    if (!localStorage.getItem('theme-preference')) {
      currentTheme.value = e.matches ? 'dark' : 'light'
      applyTheme()
    }
  })
}

// 点击外部关闭主题选择器
const handleClickOutside = (event) => {
  if (!event.target.closest('.theme-toggle')) {
    showThemeSelector.value = false
  }
}

// 生命周期
onMounted(() => {
  loadTheme()
  watchSystemTheme()
  document.addEventListener('click', handleClickOutside)
})

// 监听主题变化
watch(currentTheme, () => {
  applyTheme()
})
</script>

<style scoped>
.theme-toggle {
  @apply relative flex items-center gap-2;
}

.theme-toggle-btn {
  @apply w-12 h-12 rounded-full flex items-center justify-center;
  @apply transition-all duration-300 ease-in-out;
  @apply border border-white/20;
}

.theme-toggle-btn:hover {
  @apply scale-110;
}

.theme-toggle-btn.dark {
  @apply bg-gray-800/80;
}

.theme-icon {
  @apply w-6 h-6 text-current;
}

.theme-selector-trigger {
  @apply w-10 h-10 rounded-full flex items-center justify-center;
  @apply text-gray-600 hover:text-gray-800;
  @apply border border-white/20;
}

.theme-selector {
  @apply absolute top-full right-0 mt-2 p-4 rounded-2xl;
  @apply min-w-64 z-50;
  @apply border border-white/20;
}

.theme-selector-title {
  @apply text-sm font-semibold mb-3 text-gray-700;
}

.theme-options {
  @apply grid grid-cols-2 gap-2;
}

.theme-option {
  @apply flex flex-col items-center gap-2 p-3 rounded-xl;
  @apply transition-all duration-200 ease-in-out;
  @apply border border-transparent hover:border-white/30;
  @apply hover:scale-105;
}

.theme-option.active {
  @apply border-white/50 scale-105;
  @apply shadow-lg;
}

.theme-preview {
  @apply w-8 h-8 rounded-full border-2 border-white/50;
}

.theme-name {
  @apply text-xs font-medium text-gray-700;
}

/* 主题切换动画 */
.theme-icon-enter-active,
.theme-icon-leave-active {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.theme-icon-enter-from {
  opacity: 0;
  transform: rotate(180deg) scale(0.5);
}

.theme-icon-leave-to {
  opacity: 0;
  transform: rotate(-180deg) scale(0.5);
}

/* 全局主题切换动画 */
:global(.theme-transitioning) {
  transition: background-color 0.3s ease, color 0.3s ease !important;
}

:global(.theme-transitioning *) {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
}

/* 暗黑模式样式调整 */
[data-theme="dark"] .theme-selector-title,
[data-theme="dark"] .theme-name {
  @apply text-gray-300;
}

[data-theme="dark"] .theme-selector-trigger {
  @apply text-gray-400 hover:text-gray-200;
}
</style>
